<template>
    <el-card>
        <template #header>
            <span>{{ navOpts.cardTitle }}</span>
        </template>
        <el-form>
            <el-form-item :label="navOpts.title.label" :label-width="navOpts.title.labelWidth">
                <el-input v-model="nav.title" :placeholder="navOpts.title.placeholder"></el-input>
            </el-form-item>
            <el-form-item :label="navOpts.subTitle.label" :label-width="navOpts.subTitle.labelWidth">
                <el-input v-model="nav.subTitle" :placeholder="navOpts.subTitle.placeholder"></el-input>
            </el-form-item>
            <el-form-item :label="navOpts.logo.label" :label-width="navOpts.logo.labelWidth">
                <HUpload ref="uploadLogoRef" :getResponse="getUploadResponse" :text="navOpts.logo.placeholder"
                    :action="'http://localhost:3000/upload'">
                </HUpload>
                <!-- <el-input v-model="nav.logo" :placeholder="navOpts.logo.placeholder"></el-input> -->
            </el-form-item>
            <el-form-item :label="navOpts.titleColor.label" :label-width="navOpts.titleColor.labelWidth">
                <el-color-picker v-model="nav.titleColor" show-alpha />
            </el-form-item>
            <el-form-item :label="navOpts.subTitleColor.label" :label-width="navOpts.subTitleColor.labelWidth">
                <el-color-picker v-model="nav.subTitleColor" show-alpha />
            </el-form-item>
            <el-form-item :label="navOpts.bgColor.label" :label-width="navOpts.bgColor.labelWidth">
                <el-color-picker v-model="nav.bgColor" show-alpha />
            </el-form-item>
        </el-form>
    </el-card>
    <el-card>
        <template #header>
            <span>{{ asideOpts.cardTitle }}</span>
        </template>
        <el-form>
            <div class="row-container">
                <el-row :gutter="20">
                    <el-col :span="asideOpts.deviceInfo.card.colSpan">
                        <el-form-item :label="asideOpts.deviceInfo.card.label"
                            :label-width="asideOpts.deviceInfo.card.labelWidth">
                            <el-input v-model="aside.deviceInfo.card"
                                :placeholder="asideOpts.deviceInfo.card.placeholder"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="asideOpts.deviceControl.card.colSpan">
                        <el-form-item :label="asideOpts.deviceControl.card.label"
                            :label-width="asideOpts.deviceControl.card.labelWidth">
                            <el-input v-model="aside.deviceControl.card"
                                :placeholder="asideOpts.deviceControl.card.placeholder"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="asideOpts.streamControl.card.colSpan">
                        <el-form-item :label="asideOpts.streamControl.card.label"
                            :label-width="asideOpts.streamControl.card.labelWidth">
                            <el-input v-model="aside.streamControl.card"
                                :placeholder="asideOpts.streamControl.card.placeholder"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="asideOpts.streamControl.record.type.colSpan">
                        <el-form-item :label="asideOpts.streamControl.record.type.label"
                            :label-width="asideOpts.streamControl.record.type.labelWidth">
                            <el-select v-model="aside.streamControl.record.type" class="m-2"
                                :placeholder="asideOpts.streamControl.record.type.placeholder">
                                <el-option v-for="item in asideOpts.streamControl.record.type.opts" :key="item.value"
                                    :label="item.label" :value="item.value" />
                            </el-select>
                            <el-col :span="12">
                                示例：<el-button :type="aside.streamControl.record.type">
                                    {{ aside.streamControl.record.text }}
                                </el-button>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col :span="asideOpts.streamControl.record.text.colSpan">
                        <el-form-item :label="asideOpts.streamControl.record.text.label"
                            :label-width="asideOpts.streamControl.record.text.labelWidth">
                            <el-input v-model="aside.streamControl.record.text"
                                :placeholder="asideOpts.streamControl.record.text.placeholder"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="asideOpts.streamControl.snapshot.type.colSpan">
                        <el-form-item :label="asideOpts.streamControl.snapshot.type.label"
                            :label-width="asideOpts.streamControl.snapshot.type.labelWidth">
                            <el-select v-model="aside.streamControl.snapshot.type" class="m-2"
                                :placeholder="asideOpts.streamControl.snapshot.type.placeholder">
                                <el-option v-for="item in asideOpts.streamControl.snapshot.type.opts" :key="item.value"
                                    :label="item.label" :value="item.value" />
                            </el-select>
                            <el-col :span="12">
                                示例：<el-button :type="aside.streamControl.snapshot.type">
                                    {{ aside.streamControl.snapshot.text }}
                                </el-button>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col :span="asideOpts.streamControl.snapshot.text.colSpan">
                        <el-form-item :label="asideOpts.streamControl.snapshot.text.label"
                            :label-width="asideOpts.streamControl.snapshot.text.labelWidth">
                            <el-input v-model="aside.streamControl.snapshot.text"
                                :placeholder="asideOpts.streamControl.snapshot.text.placeholder"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <el-form-item>
                <el-button @click="onSubmit">确认</el-button>
                <el-button>重置</el-button>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="onAddPageData">添加该页面数据</el-button>
    </el-card>
</template>

<script lang="ts" setup>
import { restService } from '@/apis/rest';
import HUpload from '@/components/ElementPlusWrapper/upload/HUpload.vue';
import { IHomeState } from '@/store/models/Admin/WebsiteManagement/HomeManagement/types';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const router = useRouter();
const store = useStore();
const uploadLogoRef = ref();
const home = computed(() => store.state.admin.websiteManagement.home as IHomeState);
const nav = computed(() => store.state.admin.websiteManagement.home.nav as IHomeState['nav']);
const navOpts = computed(() => store.state.admin.websiteManagement.home.navOpts as IHomeState['navOpts']);

const aside = computed(() => store.state.admin.websiteManagement.home.aside as IHomeState['aside']);
const asideOpts = computed(() => store.state.admin.websiteManagement.home.asideOpts as IHomeState['asideOpts']);
const getUploadResponse = (res: any) => {
    console.log('ressssssssssssssssss', res);
}
const onSubmit = ()=>{
        uploadLogoRef.value.uploadFiles();
    setTimeout(() => {
        store.dispatch('admin/websiteManagement/home/submit');
    }, 100);
}
store.commit('admin/websiteManagement/home/_initWebsite');
// const onNavSubmit = () => {
//     uploadLogoRef.value.uploadFiles();
//     setTimeout(() => {
//         store.dispatch('admin/websiteManagement/home/submit', 'nav');
//     }, 100);
// }

// const onAsideSubmit = () => {
//     store.dispatch('admin/websiteManagement/home/submit', 'aside');
// }

const onAddPageData = async () => {
    const data = {
        url: '/home',
        name: 'Home',
        data: {
            nav: {
                title: '实验室监控平台',
                titleColor: '#fff',
                subTitle: 'Laboaratory Monitoring Platform',
                subTitleColor: '#fff',
                logo: 'http://localhost:3000/uploads/logo.png',
                bgColor: '#3B3F48'
            },
            aside: {
                bgColor: '#3B3F48',
                deviceTitle: '设备信息',
                deviceControlTitle: '设备控制',
                streamControlTitle: '视频流控制',
                recordText: '录制',
                recordType: 'primary',
                snapshotText: '截图',
                snapshotType: 'primary',
            }
        }
    }
    const res = await restService('website', data).add()
}
</script>